<a
  class="sidebar-brand{% if logo %} centered{% endif %}"
  href="{{ pathto(master_doc) }}"
>
  {% block brand_content %} {%- if logo_url %}
  <div class="sidebar-logo-container">
    <a href="{{ pathto(master_doc) }}"
      ><img class="sidebar-logo" src="{{ logo_url }}" alt="Logo"
    /></a>
  </div>
  {%- endif %} {%- if theme_light_logo and theme_dark_logo %}
  <div class="sidebar-logo-container" style="margin: 0.5rem 1em 0.5rem 0">
    <img
      class="sidebar-logo only-light"
      src="{{ pathto('_static/' + theme_light_logo, 1) }}"
      alt="logo"
    />
    <img
      class="sidebar-logo only-dark"
      src="{{ pathto('_static/' + theme_dark_logo, 1) }}"
      alt="logo"
    />
  </div>
  {%- endif %}
  <!-- <span class="sidebar-brand-text">{{ project }}</span> -->

  {% endblock brand_content %}
</a>

<!-- Dropdown for different versions of the viser docs. Slightly hacky. -->
<div style="padding: 0 1em">
  <script>
    var viserDocsVersionsPopulated = false;

    async function getViserVersionList() {
      // This index.txt file is written by the docs.yml GitHub action.
      // https://github.com/nerfstudio-project/viser/blob/main/.github/workflows/docs.yml
      const response = await fetch("https://viser.studio/versions/index.txt", {
        cache: "no-cache",
      });
      return await response.text();
    }
    async function viserDocsPopulateVersionDropDown() {
      // Load the version list lazily...
      if (viserDocsVersionsPopulated) {
        return;
      }
      viserDocsVersionsPopulated = true;

      console.log("Populating docs version list!");
      const versions = (await getViserVersionList())
        .trim()
        .split("\n")
        .reverse();
      console.log(versions);
      let htmlString = "<ul style='margin: 0.5rem 0 0 0'>";
      htmlString += `<li><a href="https://viser.studio/latest">latest</a></li>`;
      for (let version of versions) {
        htmlString += `<li><a href="https://viser.studio/versions/${version}">${version}</a></li>`;
      }

      htmlString += "</ul>";
      document.getElementById("viser-version-dropdown").innerHTML = htmlString;
    }
  </script>
  <details
    style="
      padding: 0.5rem;
      background: var(--color-background-primary);
      border-radius: 0.5rem;
      border: 1px solid var(--color-sidebar-background-border);
    "
    ontoggle="viserDocsPopulateVersionDropDown()"
  >
    <summary style="cursor: pointer">
      <strong>Version:</strong> <em>{{ version }}</em>
    </summary>
    <div id="viser-version-dropdown"></div>
  </details>
  <!-- End dropdown -->
</div>

<div style="text-align: left; padding: 1em">
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <a
    class="github-button"
    href="https://github.com/nerfstudio-project/viser"
    data-color-scheme="no-preference: light; light: light; dark: light;"
    data-size="large"
    data-show-count="true"
    aria-label="Download buttons/github-buttons on GitHub"
  >
    Github
  </a>
</div>
